<template>
    <view class="goods-container" v-if="categoryId">
        <u-divider style="font-weight: 600;" height="80" bg-color="#f3f4f6" color="#000" fontSize="36">{{ title }}</u-divider>
        <view class="goods-list-view u-m-l-20 u-m-t-10 u-m-r-20 clearfix">
            <view  v-for="(item, index) in goodsList" :key="index" :class="[(index + 1) % 2 == 0 ? 'list-b' : '', 'goods-list']">
                <view class="goods-view">
                     <navigator :url="'/goods-module/goods?goods_id=' + item.goods_id" hover-class="none">
                        <view class="goods-img">
                            <u-image width="340" height="340" :src="item.thumbnail" :border-radius="10"></u-image>
                        </view>
                        <view class="goods-info">
                            <view class="goods-title-view u-line-2">
                                {{item.name}}
                            </view>
                            <!-- <view class="u-line-2">
                                {{item.name}}
                            </view> -->
                        </view>
                        <!-- #ifdef MP -->
                        <view class="goods-price-view" style="color: #ff5000; font-weight: 600;">
                            <text class="u-font-12">￥</text>
                            <text class="u-font-18">{{ item.price }}</text>
                        </view>
                        <!-- #endif -->
                        <!-- #ifdef APP-PLUS || H5 -->
                            <custom-price :price="item.price" :size="34" :fontWeight="600"></custom-price>
                        <!-- #endif -->
                    </navigator>
                </view>
            </view>
            <u-empty text="数据为空" mode="list" v-if="goodsList.length == 0"></u-empty>
        </view>
    </view>
</template>

<script>
    /**
     * 为你推荐展示组件
     *
     * ===== 使用场景 ======
     * 所有展示为你推荐商品的地方
     *
     * ===== 参数 =====
     * title        标题
     * categoryId   分类ID
     */
    import * as API_Goods from '@/api/goods.js'
    import { Foundation } from '@/ui-utils/index.js'
    export default {
        data() {
            return {
                // 这样就能控制点没点过了啊，
                // 我只要点过了，就把这个ID对应的数据存进去，
                // 进来就判断集合里有没有这个值，如果有就说明点过了，直接在集合里面取，
                // 如果没有就说明没点过，就要走接口获取数据
                mapList: new Map(), // 创建一个集合
                params: {
                    page_no: 1,
                    page_size: 10
                },
                goodsList: [],
                //如果没有可读取的数据，则不在调用API。 true：可读
                isLoad: true

            }
        },
        props: {
            title: {
                type: String,
                default: ''
            },
            categoryId: {
                type: [Number, String],
                default() {
                    return [0, '0']
                }
            }
        },
        methods: {
            // ’为你推荐‘商品列表
            getGoodsList() {
                console.log(this.isLoad);
                //如果不可读则直接返回
                if(!this.isLoad){
                   return;
                }
                API_Goods.getRecommendGoodsList(this.params).then(response => {
                    const { data } = response
                    if (data && data.length) {
                        // #ifdef MP
                        data.forEach(item => {
                            item.price = Foundation.formatPrice(item.price)
                        })
                        // #endif
                        this.goodsList.push(...data)
                        console.log('data', data.length, this.goodsList)
                        let obj = this.mapList.get(this.categoryId)
                        obj.goodsList.push(...data)
                        this.mapList.set(this.categoryId, obj)
                    }else{
                        this.isLoad = false;
                    }
                })
            },
            // 清空分类商品列表
            clear() {
                this.$refs.uWaterfall.clear();
            }
        },
        watch: {
            categoryId: {
                handler (newVal, oldVal) {
                    if (!newVal) return
                    console.log('是否已经点过了：', this.mapList.has(newVal))
                    if (this.mapList.has(newVal)) {
                        // this.goodsList.length && this.clear()
                        let obj = this.mapList.get(newVal)
                        this.params = obj.params
                        // this.goodsList.length && this.clear()
                        this.goodsList = []
                        console.log('点过了:', obj.goodsList.length, obj.goodsList)
                        this.$set(this, 'goodsList', obj.goodsList)
                    } else {
                        this.mapList.set(newVal, {
                            params: {
                                page_no: 1,
                                page_size: 10,
                                category: newVal
                            },
                            goodsList: []
                        })
                        this.params = {
                            page_no: 1,
                            page_size: 10,
                            category: newVal
                        }
                        // this.goodsList.length && this.clear()
                        this.goodsList = []
                        this.getGoodsList()
                    }
                    // if (!newVal || newVal === oldVal) return
                    // this.params = {
                    //     ...this.params,
                    //     category: newVal
                    // }
                    // this.goodsList.length && this.clear()
                    // this.getGoodsList()
                },
                deep: true,
                immediate: true
            }
        }
    }
</script>

<style lang="scss">
    .goods-list-view {
        border-radius: 15rpx 15rpx 0rpx 0rpx;
        padding-bottom: 200rpx;
        &.clearfix::after {
            content: "";
            display: block;
            height: 0;
            clear:both;
            visibility: hidden;
        }
        .goods-list {
            width: 48%;
            float: left;
            background: #FFFFFF;
            overflow: hidden;
            margin: 10rpx 0;
            border-radius: 20rpx;
            &.list-b {
                margin-left: 24rpx;
            }
        }
    }
    .goods-view {
        // display: flex;
        // flex-direction: row;
        // padding: 10rpx 20rpx;
        // background-color: #FFFFFF;
        .goods-info {
            margin: 20rpx;
            .goods-price-view {
                margin: 10rpx 0;
            }
            .goods-title-view {
                height: 76rpx;
            }
            .goods-comments {
                font-size: 23rpx;
                color: #82848A;
                margin: 20rpx 0;
                display: flex;
            }
            .u-margin-left-10 {
                font-size: 28rpx;
                color: #000;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
      }
</style>

